<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>商品详情</title>
		<%@ include file="/WEB-INF/views/modules/marketHeader.jsp"%>
		<link rel="stylesheet" type="text/css" href="${ctxStatic}/IDH/css/commodity_detail.css" />
		<link rel="stylesheet" type="text/css" href="${ctxStatic}/swiper/swiper-3.4.0.min.css" />
	</head>
	<body>
		
		<!-- 移动端swiper -->
		<div class="detail-swiper-mobile visible-xs-block">
			<div class="swiper-container" id="swiper-container-mobile">
			    <div class="swiper-wrapper">
			        <c:forEach items="${lst }" var="image">
			    		<c:if test="${image != ''}"><div class="swiper-slide"><img src="${uploadPath }${image }"></div></c:if>
			    	</c:forEach>
			    </div>
			    <!-- 如果需要分页器 -->
				<div class="swiper-pagination"></div>
			</div>
		</div>
		
		<section class="container content">
			<form:form id="inputForm" modelAttribute="genCart" action="${ctxf}/front/cart/genCart/buyNow" method="post" class="form-horizontal" htmlEscape="true">
				<form:hidden path="productid" id="productid"/>
				<form:hidden path="accountid" id="accountid"/>
				<form:hidden path="amt" id="amt"/>
				
				<input type="hidden" id="productIdHidden" name="productIdHidden" value="${genProduct.id }"/>
				<input type="hidden" id="buyAmt" name="buyAmt" value=""/>
				<input type="hidden" id="stock" value="${genProduct.stock }"/>
			</form:form>
			<div class="col-md-12 col-xs-12">
				
				<div class="row">
					<c:if test="${genProduct==null}">
						<h3>此商品不存在，请刷新首页</h3>
					</c:if>
					<input type="hidden" id="productIdHidden" name="productIdHidden" value="${genProduct.id }"/>
					<input type="hidden" id="buyAmt" name="buyAmt" value=""/>
					<input type="hidden" id="stock" value="${genProduct.stock }"/>
					<%-- <input type="hidden" id="loginUserId" value="${user.id}"/> --%>
					
					<div id="detail" class="col-md-12">
						<!-- pc端swiper -->
						<div class="detail-swiper col-md-7 hidden-xs">
							<div class="row show-img">
								<img id="showImg" src="${uploadPath }${genProduct.maxpicture }">
							</div>
							<div class="swiper-container col-md-10 col-md-offset-1 pc-swiper-left-9" id="swiper-container">
							    <div class="swiper-wrapper">
							    	<c:forEach items="${lst }" var="image">
							    		<c:if test="${image != ''}"><div class="swiper-slide"><img src="${uploadPath }${image }"></div></c:if>
							    	</c:forEach>
							    </div>
							</div>
							<!-- 如果需要导航按钮 -->
							<c:if test="${not empty lst}">
								<div class="swiper-button-prev"></div>
						    	<div class="swiper-button-next"></div>
							</c:if>
						    
						</div>
						
						<!--pc端价格购买-->
						<div class="detail-cont col-md-5 hidden-xs">
							<div class="detail-cont-title">
								<label>${genProduct.name }</label>
								<c:if test="${fn:length(genProduct.introduce) <= 80}">
									<p title="${genProduct.introduce}">${genProduct.introduce}</p>
								</c:if><c:if test="${fn:length(genProduct.introduce) > 80}">
									<p title="${genProduct.introduce}">${fn:substring(genProduct.introduce,0,80)}...</p>
								</c:if>
							</div>
							<div class="detail-cont-num">
								<ul>
									<li><label>价格</label><span class="color-red">¥${genProduct.nowprice }</span></li>
									<li>
										<label>数量</label>
										<span>
											<button class="num-a" ref="minus">-</button>
						 					<input class="num-input" value="1">
						 					<button class="num-a" ref="add" id="element" title="提示"  
													 data-toggle="popover" data-placement="right" 
													data-content="数量超过库存">+</button>
										</span>
										<span class="stock">
											<c:choose>
											<c:when test="${genProduct.stock != '0'}">
		                               			库存  <span>${genProduct.stock }</span>件
		                               		</c:when>
		                               		<c:when test="${genProduct.stock == '0'}">
		                               			库存不足
		                               		</c:when>
		                               		</c:choose>
										</span>
									</li>
								</ul>
							</div>
							<div class="detail-cont-buy">
								<c:choose>
                               		<c:when test="${genProduct.status == 'n'}">
                               			<p>该商品已下架！</p>
                               		</c:when>
                               		<c:when test="${genProduct.status == 'y' && genProduct.stock != '0'}">
                               			<button class="add" onclick="addProductToCart('pc');"><i class="iconfont icon-gouwuche"></i>加入购物车</button>
										<button class="now-buy" onclick="buyNow();">立即购买</button>
                               		</c:when>
                               		<c:when test="${genProduct.stock == '0'}">
		                               	<button class="btn btn-default notProduct" disabled="disabled">暂时缺货</button>
                               		</c:when>
                               	</c:choose>
							</div>
						</div>
						<!--手机端价格购买-->
						<div class="row detail-cont-moblie visible-xs-block">
							<div class="detail-cont-title">
								<label>${genProduct.name }</label>
								<c:if test="${fn:length(genProduct.introduce) <= 80}">
									<p title="${genProduct.introduce}">${genProduct.introduce}</p>
								</c:if><c:if test="${fn:length(genProduct.introduce) > 80}">
									<p title="${genProduct.introduce}">${fn:substring(genProduct.introduce,0,80)}...</p>
								</c:if>
								<span class="color-red">¥${genProduct.nowprice }</span>
							</div>
							<div class="buy-num">
								<div class="num-mobile row">
									<div class="col-xs-5">
										<button class="num-a" ref="minus">-</button>
					 					<input class="num-input"  value="1">
					 					<button class="num-a" ref="add">+</button>
									</div>
									<div class="col-xs-7">
										<c:choose>
		                               		<c:when test="${genProduct.status == 'n'}">
		                               			<p>该商品已下架！</p>
		                               		</c:when>
		                               		<c:when test="${genProduct.status == 'y' && genProduct.stock != '0'}">
		                               			<button class="add" onclick="addProductToCart('phone');">加入购物车</button>
												<button class="now-buy" onclick="buyNow();">立即购买</button>
		                               		</c:when>
		                               		<c:when test="${genProduct.stock == '0'}">
				                               	<button class="btn btn-default notProduct" disabled="disabled">暂时缺货</button>
		                               		</c:when>
		                               	</c:choose>
									</div>
								</div>
							</div>
						</div>
						<!--pc推荐-->
						<c:if test="${not empty result}">
						<div class="col-md-12 recommend hidden-xs">
							<label class="recommend-bar">————  推荐配件  ————</label><span class="pull-right more"><a id="pc-more"href="${ctxf}/front/product/genProduct/recomandparts?associateStr=${genProduct.associateStr}"></a></span>
							<div class="recommend-content col-md-12">
							<input type="hidden" id="recommendObjectLength" value="${fn:length(result)}" />
								<c:forEach items="${result }" var="genProduct" varStatus="ss">
									<c:if test="${ss.index < 3 }">
										<div class="recommend-content-detail">
											<a href="${ctxf}/front/product/genProduct/detail?id=${genProduct.id}">
												<span class="title"  title="${genProduct.name }">${genProduct.name }</span><span class="color-red pull-right">¥${genProduct.nowprice }</span>
												<p>${genProduct.introduce }</p>
												<div class="detail-img text-center">
													<img src="${uploadPath }${genProduct.maxpicture }"/>
												</div>
											</a>
										</div>
									</c:if>
								</c:forEach>
							</div>
						</div>
						<!--手机端推荐-->
						<div class="row recommend-mobile visible-xs-block">
							<label class="recommend-bar">————  推荐配件  ————</label>
							<div class="recommend-content">
							
								<c:forEach items="${result }" var="genProduct" varStatus="ss">
									<c:if test="${ss.index < 2 }">
										<div class="recommend-content-detail">
											<a href="${ctxf}/front/product/genProduct/detail?id=${genProduct.id}">
												<span class="title">${genProduct.name }</span><span class="color-red pull-right">¥${genProduct.nowprice }</span>
												<p>${genProduct.introduce }</p>
												<div class="detail-img text-center">
													<img src="${uploadPath }${genProduct.maxpicture }"/>
												</div>
											</a>
										</div>
									</c:if>
								</c:forEach>
							</div>
							<a href="${ctxf}/front/product/genProduct/recomandparts?associateStr=${genProduct.associateStr}">
								<div class="col-xs-12 text-center" id="phone-more" >
									
								</div>
							</a>
						</div>
						</c:if>
						<c:if test="${not empty result}">
							<div class="col-md-12 col-xs-12" style="height: 3em;"></div>
						</c:if>
						<!-- pc介绍 -->
						<div class="col-md-12 hidden-xs">
							<div class="col-md-12">
								<div class="col-md-12 commodity-detail">
									<ul class="nav nav-tabs">
										<li class="active">
											 <a href="#introduce" data-toggle="tab">商品介绍</a>
										</li>
										<li>
											 <a href="#parameter" data-toggle="tab">参数</a>
										</li>
									</ul>
									<div class="tab-content">
										<div class="tab-pane active" id="introduce">
											<p>
												${genProduct.detail }
											</p>
										</div>
										<div class="tab-pane" id="parameter">
											<p>
												${genProduct.producthtml }
											</p>
										</div>
									</div>
								</div>
							</div>
						</div>
						<!--手机端介绍  -->
						<div class="row commodity-detail visible-xs-block">
							<ul class="nav nav-tabs">
								<li class="active">
									 <a href="#introduceMobile" data-toggle="tab">商品介绍</a>
								</li>
								<li>
									 <a href="#parameterMobile" data-toggle="tab">参数</a>
								</li>
							</ul>
							<div class="tab-content">
								<div class="tab-pane active" id="introduceMobile">
									<p>
										${genProduct.detail }
									</p>
								</div>
								<div class="tab-pane" id="parameterMobile">
									<p>
										${genProduct.producthtml }
									</p>
								</div>
							</div>
						</div>
					</div>

				</div>
			</div>

		</section>

		<!--pc content end-->
	<%@ include file="/WEB-INF/views/modules/marketFooter.jsp"%>

	</body>

	<script src="${ctxStatic}/swiper/swiper-3.4.0.min.js"></script>
	<script src="${ctxStatic}/imagezoom/jquery.imagezoom.min.js"></script>
	<script type="text/javascript">
	var userName = true;
	var passWord = true;
	
	$(document).ready(function(){
		var recommendObjectLength = $("#recommendObjectLength").val();
		if(recommendObjectLength > 3){
			$("#pc-more").append("<span>查看更多>></span>");
		}
		if(recommendObjectLength > 2){
			$("#phone-more").append("<button class='more-mobile'>查看更多</button>");
		}
		
		var body_width = document.body.clientWidth + 'px'; 
		$(".detail-swiper-mobile .swiper-slide img").css({"width":body_width});
	})
	
	
	/*swiper初始化*/
	  var swiper1 = new Swiper('#swiper-container', { 
    	nextButton: '.swiper-button-next',
	    prevButton: '.swiper-button-prev',
	    slidesPerView: 4,       /*每页显示几张图片*/
	    centeredSlides: false,   /*从中间显示*/
	    spaceBetween: 20,		/*图片间距*/
	    autoplay : 3000,		/*播放速度3s*/
	    autoplayDisableOnInteraction : false,		/*操作后自动切换不会停止*/
	    loop : false, 			/*自动播放*/
	  	parallax: false,
	    speed: 600,
	}); 
	
	/*swiper 手机端初始化*/
	  var swiper2 = new Swiper('#swiper-container-mobile', { 
    	pagination: '.swiper-pagination',
	    paginationClickable: true,		/*分页器*/
	    nextButton: '.swiper-button-next',
	    prevButton: '.swiper-button-prev',
	    autoHeight: true,  /*自动 */
	    loop : true,
	    autoplay : 3000,
	    autoplayDisableOnInteraction : false, 
	});
	
	/*购买数量*/
	$(".num-a").click(function(){
		var maxNumber = $("#stock").val();
		var num = parseInt($(this).parent().find("input").val());
		var sorted = $(this).attr("ref");
		if(sorted  == "minus"){
			var num =  num - 1;
			if(num > 0){
				$(this).parent().find("input").val(num)
			}else{
				layer.open({title: '提示', content: '商品数量不能小于1', icon: 0});
			}
		}else{ 
			var num = num + 1;
			if (num <= parseInt(maxNumber)) {
				$(this).parent().find("input").val(num)
			}else{
				layer.open({title: '提示', content: '商品数量不能大于' + maxNumber, icon: 0});
			}
		}
	})
	
	/* 加入购物车 */
	function addProductToCart(type) {
		$('#isAdd').val('true');
		var stock = $("#stock").val();
		var amtType = '';
		if(type == 'pc'){
			amtType = $(".num-input").eq(0).val()
		}else{
			amtType = $(".num-input").eq(1).val()
		}
		$.ajax({
			type:"POST",
			data:{id:$("#productIdHidden").val()},
			async: false,
			url: "${ctxf}/front/product/genProduct/getStockByProductId",
			dataType:"json",
			success:function(msg){
				stock = msg.stock;
			},
			error:function() {
			}
		});
		
		if ("" == $("#loginUserId").val()) {
			$('#loginModal').modal("show");
		}else if ( parseInt(stock) < parseInt($(".num-input").val())) {
			layer.open({title: '提示', content:"库存不足", icon: 0});
			return false;
		}else{
			$.ajax({
				type:"POST",
				data:{productid:$("#productIdHidden").val(),amt:amtType},
				async: true,
				url: "${ctxf}/front/cart/genCart/save",
				dataType:"json",
				success:function(msg){
					$("#countDiv").attr("class","carNumber");
					$("#countDivPhone").attr("class","carNumberPhone");
					$("#countDiv").html(msg.count);
					$("#countDivPhone").html(msg.count);
					layer.msg(msg.message);
				},
				error:function() {
				}
			});
		}
	}
	
	function buyNow() {
		var stock = $("#stock").val();
		$.ajax({
			type:"POST",
			data:{id:$("#productIdHidden").val()},
			async: false,
			url: "${ctxf}/front/product/genProduct/getStockByProductId",
			dataType:"json",
			success:function(msg){
				stock = msg.stock;
			},
			error:function() {
			}
		});
		
		if ("" == $("#loginUserId").val()) {
			$('#loginModal').modal("show");
			return false;
		}else if ( parseInt(stock) < parseInt($(".num-input").val())) {
			layer.open({title: '提示', content:"库存不足", icon: 0});
			return false;
		}else{
			$("#buyAmt").val($(".num-input").val());
			$("#inputForm").submit();
		}
		
	}
	
	/*改变展示图片*/
	$(function(){
		$("#showImg").imagezoom();   /* 放大镜效果 */
		$(".swiper-slide img").click(function (){
			var src = $(this).attr("src");
			$("#showImg").attr("src",src);
		});
	});
	
	$(".num-input").keyup(function(){
		var maxNumber = $("#stock").val();
		var num = $(this).val();
		if(!isNaN(num)){
			if(num<=0){
				layer.open({title: '提示', content: '商品数量不能小于1', icon: 0});
			}else if(num > parseInt(maxNumber)){
				layer.open({title: '提示', content: '商品数量不能大于' + parseInt(maxNumber), icon: 0});
				$(this).val(parseInt(maxNumber))
			}else {}
		}else{
			layer.open({title: '提示', content: '请输入数字', icon: 0});
			$(this).val('1')
		}
		if(!/^[1-9]\d*$/.test(num)){
			layer.open({title: '提示', content: '请输入正整数', icon: 0});
			$(this).val("1");
		}
	})
  </script>
</html>